{extend name="public/base"/}

{block name="body"}
<div class="row">
  <div class="col-md-4 col-sm-12 col-xs-12 col-md-offset-4">
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
      <ul class="layui-tab-title">
        <li><a href="{:url('user/login/index')}">登入</a></li>
        <li class="layui-this">注册</li>
      </ul>
      <div class="layui-tab-content" style="height: 100px;">
        <div class="layui-tab-item layui-show">

          <form class="layui-form layui-form-pane" action="{:request()->url()}" method="post">
            <div class="layui-form-item">
              <label class="layui-form-label">用户名</label>
              <div class="layui-input-block">
                <input name="username" autocomplete="off" placeholder="请输入用户名" class="layui-input" type="text" lay-verify="required">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">密码</label>
              <div class="layui-input-block">
                <input name="password" autocomplete="off" placeholder="请输入密码" class="layui-input" type="password" lay-verify="required">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">确认密码</label>
              <div class="layui-input-block">
                <input name="repassword" autocomplete="off" placeholder="请输入确认密码" class="layui-input" type="password" lay-verify="required">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">邮箱</label>
              <div class="layui-input-block">
                <input name="email" autocomplete="off" placeholder="请输入邮箱" class="layui-input" type="text" lay-verify="required|email">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">验证码</label>
              <div class="layui-input-block">
                <input name="verify" autocomplete="off" placeholder="请输入验证码" class="layui-input" type="text">
              </div>
            </div>
            <div class="layui-form-item">
              <div class="controls verifyimg">
                {:captcha_img()}
              </div>
            </div>
            <div class="layui-form-item">
              <button class="btn btn-success col-md-12 col-sm-12 col-xs-12" lay-submit="" lay-filter="formLogin">登入</button>
            </div>
          </form>

        </div>
        <div class="layui-tab-item"></div>
      </div>
    </div>
  </div>
</div>

{/block}

{block name="side"} {/block}

{block name="script"}
<style>
  .verifyimg img{
    width: 100%;
  }
</style>
	<script type="text/javascript">
    	$(document)
	    	.ajaxStart(function(){
	    		$("button:submit").addClass("log-in").attr("disabled", true);
	    	})
	    	.ajaxStop(function(){
	    		$("button:submit").removeClass("log-in").attr("disabled", false);
	    	});


    	$("form").submit(function(){
    		var self = $(this);
    		$.post(self.attr("action"), self.serialize(), success, "json");
    		return false;

    		function success(data){
    			if(data.code){
                    layer_success(data.msg);
                    setTimeout(function(){
                        window.location.href = data.url;
                    },1500);
    			} else {
    				layer_error(data.msg);
    				//刷新验证码
    				$(".verifyimg img").click();
    			}
    		}
    	});

		$(function(){
      //刷新验证码
        var verifyimg = $(".verifyimg img").attr("src");
        $(".verifyimg img").click(function(){
            if( verifyimg.indexOf('?')>0){
                $(".verifyimg img").attr("src", verifyimg+'&random='+Math.random());
            }else{
                $(".verifyimg img").attr("src", verifyimg.replace(/\?.*$/,'')+'?'+Math.random());
            }
        }); 
    });
	</script>
{/block}
